<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          
        </div>
      </div>
    </div>
    <!-- 注册之后跳转found页，填写简历 -->
    <div class="content">
      <div class="logo">
        <img src="../assets/zjt2.png" alt="" class="back" @click="back()" />
        <img src="../assets/bg.png" alt="" class="logo-bg"/>
      </div>
			
	  <!-- 个人账号密码登录 -->
      <div class="content" v-show="act==0">
        <p>个人密码登录</p>
        <div class="head-title">
          <input type="text" v-model="loginAccountName" placeholder="用户名" />
        </div>
        <div class="head-title">
          <input type="password" v-model="loginPassword" placeholder="密码" />
        </div>
        <div class="head-btn" @click="loginUser">登录</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(2)">立即注册</span>
          <span>|</span>
          <span @click="on(4)">忘记密码</span>
           <span>|</span>
          <span @click="on(5)">公司登录</span>
        </div>
      </div>
			 <!-- 公司账号密码登录 -->
      <div class="content" v-show="act==5">
        <p>公司密码登录</p>
        <div class="head-title">
          <input type="text" v-model="loginAccountNameCo" placeholder="用户名" />
        </div>
        <div class="head-title">
          <input type="password" v-model="loginPasswordCo" placeholder="密码" />
        </div>
        <div class="head-btn" @click="loginComUser">登录</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(2)">立即注册</span>
          <span>|</span>
          <span @click="on(4)">忘记密码</span>
          <span>|</span>
          <span @click="on(0)">个人登录</span>
        </div>
      </div>

      <div class="content" v-show="act==1">
        <p>快捷登录</p>
        <div class="head-title">
          <input type="text" placeholder="请输入手机号" />
          <span>获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" placeholder="请填写验证码" />
        </div>
        <div class="head-btn">登录</div>
        <div class="bottom">
          <span @click="on(0)">密码登录</span>
          <span>|</span>
          <span @click="on(2)">立即注册</span>
        </div>
      </div>
	  
	  <!-- 注册用户-->
      <div class="content" v-show="act==2">
        <p>注册用户</p>
        <div class="head-title">
          <input type="text" v-model="accountName" placeholder="登录账号" @blur="accountNameBlur" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入手机号" v-model="mobile" />
          <span>获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入验证码" />
        </div>
        <div class="head-title">
          <input type="text" v-model="password" placeholder="请输入密码(最少6位，数字或字母)" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请确认密码(最少6位，数字或字母)" />
        </div>
        <div class="head-btn" @click="registerAccount">立即注册</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(0)">密码登录</span>
          <span>|</span>
          <span @click="on(3)">商家入驻</span>
        </div>
        <div class="bottom">
          <span>注册/登录即代表同意</span>
        </div>
      </div>
      <div class="content" v-show="act==3">
        <p>商家入驻</p>
        <div class="head-title">
          <input type="text" v-model="accountNameCo" placeholder="登录账号" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入手机号" />
          <span>获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入验证码" />
        </div>
        <div class="head-title">
          <input type="text" v-model="passwordCo" placeholder="请输入密码(最少6位，数字或字母)" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请确认密码(最少6位，数字或字母)" />
        </div>
        <div class="head-btn" @click="registerCoAccount">立即注册</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(0)">密码登录</span>
          <span>|</span>
          <span @click="on(2)">用户注册</span>
        </div>
        <div class="bottom">
          <span>注册/登录即代表同意</span>
        </div>
      </div>
      <div class="content" v-show="act==4">
        <p>忘记密码</p>
        <div class="head-title">
          <input type="text" placeholder="请输入手机号" />
          <span>获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" placeholder="请填写验证码" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入新密码(最少6位，数字或字母)" />
        </div>
        <div class="head-btn">登录</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(0)">密码登录</span>
        </div>
      </div>
    </div>
    <img src="../assets/login.jpg" alt="" class="bg" />
  </div>
</template>

<script>
	import { Toast } from 'mint-ui';
export default {
  inject: ["reload"],
  name: "spread",
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      act:0,
	  accountName: '',
	  password: '',
    accountNameCo: '',
    passwordCo: '',
	  mobile: '',
	  loginAccountName: '',
	  loginPassword: '',
    loginAccountNameCo: '',
	  loginPasswordCo: ''
    };
  },
  // methods 编写js函数
  methods: {
	  accountNameBlur(){
		  console.log(1111111);
		  if(this.accountName == '' || this.accountName == null){
			  console.log(2222222);
		  }
	  },
    back() {
      this.$router.go(-1); //返回上一层
    },
    on(n){
      this.act=n;
    },
	//个人账号密码登录账号
	loginUser(){
		Toast('Upload Complete');
	},
  //公司账号密码登录账号
  loginComUser(){
    this.$http({
			method:"post",
			url: 'api/comuser/loginCom',
			params: {
				loginAccountName: this.loginAccountNameCo,
				loginPassword: this.loginPasswordCo
			}
		})
		.then(({data}) => {
      console.log("AAAA"+data.companyUser);
		  localStorage.status = 1;
		  localStorage.setItem("userId", data.companyUser.id);
		  console.log(localStorage.getItem("userId"));
		  this.$router.push("/");
		})
  },
	//注册个人账号
	registerAccount() {
		console.log(this.password);
		this.$http({
		  method: "get",
		  url: 'api/ycuser/save',
		  params: {
			  'accountName': this.accountName,
			  'password': this.password,
        'mobile': this.mobile
		  },
		})
		.then(({data}) => {
		  console.log(data);
		})
	},
  //注册公司账号
  registerCoAccount(){
    this.$http({
      method: "get",
      url: "api/comuser/save",
      params: {
        accountName: this.accountNameCo,
        password: this.passwordCo
      },
    }).then(({data}) => {
      if(data.code == 200){//注册成功跳转密码登录页
        this.on(0);
      }
    })
  }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.back {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  z-index: 999;
}
.logo {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  justify-content: center;
  padding-top: 20px;
}
.logo .logo-bg {
  /* width: 100%; */
  height: 150px;
}
.content {
  position: relative;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.content p {
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}
.head-title {
  flex: 1;
  width: 70%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  display: flex;
  align-items: center;
  height: 40px;
  margin: 10px 0;
}
.head-title span {
  font-size: 12px;
  padding-left: 10px;
}
.head-title input {
  border: 0;
  flex:1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-btn {
  background: #f4cf4f;
  width: 70%;
  font-size: 14px;
  text-align: center;
  color: #3e63a8;
  height: 35px;
  line-height: 35px;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.con-box {
  width: 100%;
}
.bottom{
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-around;
  padding-top: 20px;
}
</style>
